<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox"
    @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="单据状态" prop="handInBillState">
        <ElSelectBox :data="search" dataName="handInBillState" :all="{
          label: '全部',
          value: -1,
        }" :options="options.state" />
      </ElFormItemBox>
      <!-- <ElFormItemBox label="缴库类型" prop="handInType">
        <ElSelectBox :data="search" dataName="handInType" :all="{
          label: '全部',
          value: 0,
        }" :options="options.handInType" />
      </ElFormItemBox> -->
      <ElFormItemBox label="入库状态" prop="inStockState">
        <ElSelectBox :data="search" dataName="inStockState" :all="{
          label: '全部',
          value: -1,
        }" :options="options.inStockState" />
      </ElFormItemBox>
      <ElFormItemBox label="日期范围" prop="">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox>
    </template>
    <template #headR>
    </template>
    <template #handInBillStateName="{ row }">
      <ElTagBox :data="row.handInBillState" :options="options.state" />
    </template>
    <template #inStockStateName="{ row }">
      <ElTagBox :data="row.inStockState" :options="options.inStockState" />
    </template>
    <template #handInBillNo="{ row }">
      <PopoverTabel :title="row.handInBillNo" :width="1200" :thead="[
        {
          label: '缴库类型',
          prop: 'handInType',
          align: 'center',
          width: 100,
        },
        {
          label: '产品型号',
          prop: 'productSpecificationName',
          align: 'center',
          width: 100,
        },
        {
          label: '实缴数量',
          prop: 'handInQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '原库存使用',
          prop: 'originalQuantityUsage',
          align: 'center',
          width: 100,
        },
        {
          label: '包装数量',
          prop: 'packagingQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '缴库箱数',
          prop: 'handInBoxs',
          align: 'center',
          width: 100,
        },
        {
          label: '包装描述',
          prop: 'packageDescription',
          align: 'left',
          width: 220,
        },
        {
          label: '公斤数',
          prop: 'kilogramQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '备注',
          prop: 'handInMxRemark',
          align: 'center',
          width: null,
        },
      ]" :tbody="row.detailList">
        <template #handInType="{ row }">
          {{ row.handInType === 1 ? '库存' : '发货' }}
        </template>
      </PopoverTabel>
    </template>
  </PageBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
// 组件挂载后执行
onMounted(() => {
  getTbody();
});
const { dataInfo, getTbody, options } = useListComponent();
</script>
